﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoodsList.aspx.cs" Inherits="Mobile_New_Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=2.0,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../New/swiper/css/swiper-3.3.1.min.css" />
    <link rel="stylesheet" type="text/css" href="../New/css/index.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #f0f0f0;
        }

        .div_meiyou {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #b5b5b5;
        }

        a, img, button, input, textarea {
            -webkit-tap-highlight-color: rgba(255,255,255,0);
        }

            a:active {
                outline: hidden;
            }

        .header {
            width: 100%;
            height: 40px;
            line-height: 40px;
            position: fixed;
            top: 0;
            left: 0;
            border-bottom: 1px solid #eee;
            background: #efefef;
            z-index: 101;
        }

            .header .header_left,
            .swiper-container1 {
                width: 100%;
                height: 40px;
                line-height: 40px;
                font-family: 'Microsoft Yahei';
                font-size: 15px;
                overflow: hidden;
                position: absolute;
            }

                .header .header_left a {
                    display: block;
                    line-height: 40px;
                    float: left;
                    width: 25%;
                    text-align: center;
                }




        .content {
            padding-top: 40px;
            padding-bottom: 96px;
        }

        .middle {
            width: 100%;
            height: 140px;
            border-bottom: 1px solid #d9d9d9;
        }

            .middle .middle_left {
                float: left;
                width: 40%;
            }

                .middle .middle_left img {
                    width: 120px;
                    padding: 10px 0px 2px 10px;
                    height: 120px;
                }

            .middle .middle_right {
                float: left;
                width: 60%;
                height: 140px;
            }

                .middle .middle_right ul {
                    margin-right: 10px;
                }

                    .middle .middle_right ul li {
                        line-height: 20px;
                        text-align: right;
                        color: #aeaeae;
                    }

                        .middle .middle_right ul li .botton {
                            color: #fff;
                            width: 60px;
                            height: 25px;
                            line-height: 25px;
                            text-align: center;
                            background: #fb362e;
                            border-radius: 6px;
                            margin-right: 2px;
                            margin-top: 12px;
                            float: right;
                            cursor: pointer;
                            display: block;
                        }

        .d_1 {
            margin-top: 18px;
            height: 25px;
            margin-right: 2px;
            display: none;
        }

        .li_right {
            float: right;
        }

            .li_right img {
                width: 20px;
                height: 20px;
            }

        .middle .middle_right ul .li_1 {
            margin-top: 8px;
        }

        .middle {
            background: #fff;
        }

            .middle .middle_right ul .li_1 span {
                display: inline-block;
                width: 50px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background: #f4f4f4;
                border-radius: 6px;
            }

            .middle .middle_right ul .li_1 font {
                color: #f12337;
            }

            .middle .middle_right ul .li_1 b {
                color: #f12337;
                font-size: 20px;
            }

            .middle .middle_right ul h2 {
                color: #343434;
                font-size: 15px;
                padding-top: 20px;
            }

        .swiper-container1 li {
            text-align: center;
        }

        .selected {
            border-bottom: 3px solid #FB362E;
            color: #FB362E;
            box-sizing: border-box;
        }

        .footer_bottom {
            width: 100%;
            height: 40px;
            position: fixed;
            left: 0px;
            bottom: 56px;
            color: #e4ebcc;
            z-index: 999;
        }

            .footer_bottom .div_left {
                height: 40px;
                line-height: 40px;
                float: left;
                width: 75%;
                background: #000;
            }

            .footer_bottom .div_right {
                height: 40px;
                line-height: 40px;
                background: #fc263e;
                text-align: center;
                float: left;
                width: 25%;
                font-size: 14px;
                color: #fff;
            }

            .footer_bottom .div_left .teb_all1 {
                display: inline-block;
                width: 30%;
                float: left;
            }

            .footer_bottom .div_left .teb_all2 {
                display: inline-block;
                width: 70%;
                float: left;
            }

            .footer_bottom .div_left table font {
                color: #FB362E;
            }

        .tb1_td1 {
            text-indent: 10px;
        }

        .tb1_td2 {
            font-size: 13px;
        }

        .content {
            padding-top: 41px;
            padding-bottom: 55px;
        }

        .swiper-container {
            width: 100%;
            height: 150px;
            color: #fff;
            text-align: center;
        }

            .swiper-container img {
                width: 100%;
            }

        #icon_num {
            width: 22px;
            height: 16px;
            background: #FB263e;
            color: #fff;
            line-height: 16px;
            border-radius: 16px;
            font-style: normal;
            font-size: 13px;
            position: absolute;
            left: 50%; /*margin-left:9px;*/
            z-index: 999;
            text-align: center;
            display: block; /*margin:0 auto;*/
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="header" style="display: none;">
            <div class="header_left swiper-container1">
                <ul id="swiper_ul" class="swiper-wrapper">
                    <asp:Repeater runat="server" ID="rpGoodsClass">
                        <ItemTemplate>
                            <a href="#" class="swiper-slide" id=" <%# Eval("ClassID")%>" name=" <%# Eval("ClassID")%>" onclick="nav_top(this);">
                                <li><%# Eval("ClassName")%>
                                </li>
                            </a>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>

        <div class="content" style="padding-top: 0px;">

            <div id="goods">
                <div style="text-align: center; display: none; margin-top: 10px;" runat="server" id="msg">暂无商品信息</div>
                <asp:Repeater runat="server" ID="rptGoodList">
                    <ItemTemplate>
                        <div class="middle">
                            <div class="middle_left">
                                <a href="GoodsDetail.aspx?GoodsID=<%# Eval("GoodsID")%>&GoodsPrice=<%# Eval("Price")%>">
                                    <img src="<%# Eval("img")%>" onerror="this.src='/images/Gift/nogift.jpg'" />
                                </a>
                            </div>
                            <div class="middle_right">
                                <ul>
                                    <li>
                                        <h2><%# Eval("Name").ToString().Length>7?Eval("Name").ToString().Substring(0, 7) + "...":Eval("Name").ToString()%></h2>
                                    </li>
                                    <li><%#System.Web.HttpUtility.UrlDecode( Chain.Common.StringPlus.HtmlDecode(Eval("GoodsRemark").ToString()).Length>7?Chain.Common.StringPlus.HtmlDecode(Eval("GoodsRemark").ToString()).Substring(0, 7) + "...":Chain.Common.StringPlus.HtmlDecode(Eval("GoodsRemark").ToString()))%></li>
                                    <li class="li_1">
                                        <span><%# Eval("ClassName")%></span><font class="price_product_{1}">￥<b> <%# decimal.Parse(Eval("Price").ToString()).ToString("0.00")%></b></font>
                                    </li>
                                    <li>
                                        <div class="botton" id="botton_<%# Eval("GoodsID") %>" data-id="<%# Eval("GoodsID") %>" data-price="<%# Eval("Price")%>" style="width: 80px" onclick="AddToCart(this);">加入购物车</div>
                                        <div class="d_1">
                                            <ul style="margin-right: 0;">
                                                <li class="li_right">
                                                    <img src="../New/images/btn_add_to_shopping_cart_normal.png" id="minus_<%# Eval("GoodsID")%>" onclick="index_changenums('<%# Eval("GoodsID")%>','<%# Eval("Price")%>','+');" /></li>
                                                <li class="li_right">
                                                    <input id="number_<%# Eval("GoodsID")%>" type="text" value="0" style="margin-top: -6px; font-size: 16px; width: 50px; text-align: center; border: none; text-shadow: none; outline: none;" readonly="true" /></li>
                                                <li class="li_right">
                                                    <img src="../New/images/btn_reduce_from_shopping_cart_normal.png" id="plus_<%# Eval("GoodsID")%>" onclick="index_changenums('<%# Eval("GoodsID")%>','<%# Eval("Price")%>','-');" /></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>

        </div>
        <div class="a_footer" id="footer">
            <ul>
                <a href="#">
                    <li class="ico1ed">
                        <span>首页</span>
                    </li>
                </a>
                <a href="shopcart.aspx">
                    <li class="ico3">
                        <i id="icon_num" style="display: none"></i>
                        <span id="icon_price" style="display: none">¥0.0</span>
                        <span id="cart">购物车</span>
                    </li>
                </a>
                <a href="MyOrder.aspx">
                    <li class="ico5">
                        <span>订单</span>
                    </li>
                </a>
                <%--<a href="Default.aspx?pageid=shangjiaxiangqing">
                    <li class="ico7">
                        <span>商家公告</span>
                    </li>
                </a>--%>
            </ul>
        </div>
    </form>
</body>
<script type="text/javascript" src="../New//js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../New/swiper/js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="../New/js/xxl.base.js"></script>
<script src="js/GoodsList.js"></script>
<script type="text/javascript">
    window.onload = function () {
        //delCookie("goodlist"); delCookie("goodlist_num"); delCookie("goodlist_price");

        //var element = document.getElementById("swiper-container");
        //element.style.height = document.body.clientWidth / 2 + "px";
        //var mySwiper = new Swiper('.swiper-container', {
        //    pagination: '.swiper-pagination',
        //    paginationClickable: true,
        //    loop: true,
        //    autoplayDisableOnInteraction: false,
        //    autoplay: 2000
        //});
        //nav_top($("#swiper_ul a:first-child"));
        $("#icon_num").text(getCookie("goodlist_num"));
        $("#icon_price").text("¥" + getCookie("goodlist_price"));
        if (getCookie("goodlist_num") > 0) {
            $("#icon_num").css("display", "block");
            $("#icon_price").css("display", "block");
        }
    }


    function nav_top(str) {

        var swiper = new Swiper('.swiper-container1', {
            slidesPerView: 5
        });
        var num = parseInt($(str).attr("name"));
        swiper.slideTo(num - 3, 1000, false);

        $($(str).siblings()).removeClass("selected");
        $(str).addClass("selected");
    }


    function AddToCart(str) {
        var userid = getCookie("uid");

        if (userid == null || userid == "") {
            alert("请先登录");
            location.href = "../New/Login.aspx";
        }
        else {
            var id = $(str).data("id");
            var price = $(str).data("price");
            $(str).css("display", "none");
            $(str).next(".d_1").css("display", "block");
            index_changenums(id, price, "+");
        }
    }
</script>
</html>
